<script setup>
import { ref,computed } from "vue";
import { useRouter,useRoute } from 'vue-router';
import { useAllDataStore } from '@/stores'
const store = useAllDataStore()
// 头部导航值
const tags = computed(()=> store.state.tags)
const route = useRoute()
const router = useRouter()
const handleMenu = (tag) => {
    router.push(tag.name)
    store.selectMenu(tag)
}
// 关闭
const handleClose = (tag,index) => {
    // 通过pinia管理的
    store.undateTags(tag)
    // 如果点击关闭的tag，不是对应的当前的页面
    if(tag.name !== route.name) return
    if(index === store.state.tags.length){
        // 这里判断的是是不是最后一个
        store.selectMenu(tags.value[index-1])
        router.push(tags.value[index -1].name)
    } else {
        store.selectMenu(tags.value[index])
        router.push(tags.value[index].name)
    }
}
</script>

<template>
  <div class="tags">
    <el-tag
        v-for="(tag,index) in tags"
        :key="tag.name"
        :closable="tag.name !== 'home'"
        :effect="route.name === tag.name ? 'dark' : 'plain'"
        @click="handleMenu(tag)"
        @close="handleClose(tag,index)"
        >
        {{ tag.label }}
    </el-tag>
  </div>
</template>

<style lang="less" scoped>
.tags{
    margin:20px 0 0 20px;
}
.el-tag{
    margin-right:10px;
}
</style>